<template>
  <div id="orderlist-table">
    <el-row>
      <el-col>
        <div style="margin-top: 15px;">
          <el-input placeholder="请输入内容" v-model="keywords" class="input-with-select">
            <el-select v-model="searchType" slot="prepend" placeholder="请选择">
              <el-option label="无" value="notype"></el-option>
              <!-- <el-option label="出租人" value="carid.ownerid.name"></el-option>
              <el-option label="承租人" value="userid.name"></el-option>
              <el-option label="车型" value="carid.brand"></el-option>
              <el-option label="车牌" value="carid.carnumber"></el-option>-->
              <el-option label="下单时间" value="createtime"></el-option>
              <el-option label="开始时间" value="starttime"></el-option>
              <el-option label="结束时间" value="endtime"></el-option>
              <el-option label="状态" value="state"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="getOrder"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row class="main">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @row-click="handleRowClick"
        style="width: 100%"
      >
        <el-table-column property="createtime" label="下单时间"></el-table-column>
        <el-table-column
          property="state"
          label="订单状态"
          :formatter="(row, column, cellValue, index)=>{return this.formatOrderStateNtS(cellValue)}"
        ></el-table-column>
        <el-table-column property="carid.ownerid.name" label="出租人"></el-table-column>
        <el-table-column property="userid.name" label="承租人"></el-table-column>
        <el-table-column property="carid.brand" label="车型"></el-table-column>
        <el-table-column property="carid.carnumber" label="车牌"></el-table-column>
        <el-table-column
          property="starttime"
          label="开始时间"
          :formatter="(row, column, cellValue, index)=>{return cellValue}"
        ></el-table-column>
        <el-table-column
          property="endtime"
          label="结束时间"
          :formatter="(row, column, cellValue, index)=>{return cellValue}"
        ></el-table-column>
        <el-table-column
          property="price"
          label="金额"
          :formatter="(row, column, cellValue, index)=>{return '￥'+cellValue}"
        ></el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-col>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[3, 5, 10, 20]"
          :page-size.sync="pageLimit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      title="订单详情"
      :modal="false"
      :visible.sync="dialogVisible"
      @closed="handleClose"
      width="600px"
    >
      <div v-if="currentRow!==null">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>车辆信息</span>
              </div>
              <div>车型：{{currentRow.carid.brand}}</div>
              <div>车牌：{{currentRow.carid.carnumber}}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>承租人</span>
              </div>
              <div>姓名：{{currentRow.carid.ownerid.name}}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>租车人</span>
              </div>
              <div>姓名：{{currentRow.userid.name}}</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="box-card">
              <div>下单时间</div>
              <div>{{currentRow.createtime}}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div>开始时间</div>
              <div>{{currentRow.starttime}}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div>结束时间</div>
              <div>{{currentRow.endtime}}</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card">状态：{{this.formatOrderStateNtS(currentRow.state)}}</el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">金额：{{currentRow.price}}</el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>出租人评价</span>
              </div>
              <div>
                <div>{{currentRow.reviewsbyowner.content}}</div>
                <div>
                  <Star :star="currentRow.reviewsbyowner.star" fontSize="20px" @click="handleClick"></Star>
                </div>
                <div>{{currentRow.reviewsbyowner.time}}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>出租人评价</span>
              </div>
              <div>
                <div>{{currentRow.reviewsbyuser.content}}</div>
                <div>
                  <Star :star="currentRow.reviewsbyuser.star" fontSize="20px" @click="handleClick"></Star>
                </div>
                <div>{{currentRow.reviewsbyuser.time}}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Star from "../Star";
export default {
  components: { Star },
  data() {
    return {
      tableData: [],
      currentRow: null,
      dialogVisible: false,
      searchType: "notype",
      keywords: "",
      pageLimit: 3,
      currentPage: 1,
      count: 0
    };
  },
  computed: {},
  methods: {
    handleClick(n) {
      console.log(n);
    },
    formatOrderStateNtS(data) {
      var str;
      switch (data) {
        case "0":
          str = "求租";
          break;
        case "1":
          str = "待支付";
          break;
        case "2":
          str = "交易失败";
          break;
        case "3":
          str = "支付完成";
          break;
        case "4":
          str = "待还车";
          break;
        case "5":
          str = "交易完成";
          break;
        default:
          str = "未知";
      }
      return str;
    },
    formatOrderStateStN(data) {
      var str;
      switch (data) {
        case "求租":
          str = "0";
          break;
        case "待支付":
          str = "1";
          break;
        case "交易失败":
          str = "2";
          break;
        case "支付完成":
          str = "3";
          break;
        case "待还车":
          str = "4";
          break;
        case "交易完成":
          str = "5";
          break;
        default:
          str = "-1";
      }
      return str;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getOrder();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getOrder();
    },
    handleRowClick(val) {
      this.currentRow = val;
      this.dialogVisible = true;
    },
    handleClose() {
      this.currentRow = null;
    },
    getOrder() {
      let formatKeywords;
      if (this.searchType === "state") {
        formatKeywords = this.formatOrderStateStN(this.keywords);
      } else {
        formatKeywords = this.keywords;
      }
      axios
        .get("/order", {
          params: {
            searchType: this.searchType,
            keywords: formatKeywords,
            pageLimit: this.pageLimit,
            currentPage: this.currentPage
          }
        })
        .then(res => {
          console.log(res.data);
          this.tableData = res.data.list;
          this.count = res.data.count;
        });
    }
  },
  mounted() {
    this.getOrder();
  }
};
</script>

<style>
#orderlist-table .el-select .el-input {
  width: 100px;
}
#orderlist-table .el-dialog .el-row {
  margin-bottom: 20px;
}
#orderlist-table .el-dialog .el-row:last-child {
  margin-bottom: 0;
}
#orderlist-table .el-row.main {
  margin-top: 20px;
  margin-bottom: 20px;
}
#orderlist-table .el-dialog,
#orderlist-table .el-card,
#orderlist-table .el-input-group__prepend,
#orderlist-table .el-input-group__append,
#orderlist-table li,
#orderlist-table button,
#orderlist-table table,
#orderlist-table thead,
#orderlist-table th,
#orderlist-table tr,
#orderlist-table td {
  background-color: #000000;
}
#orderlist-table .el-dialog {
  border: 1px solid #cccccc;
}
#orderlist-table .el-dialog__title {
  color: #ffffff;
}
#orderlist-table .el-card {
  color: #cccccc;
}
</style>